<template>
  <div>
    <div class="select-nav flex-row vux-1px-b">
      <div @click="selectListClick(index)" class="tab-list flex-grow-1 flex-x-center flex-y-center"
           v-for="(item,index) in tabs">
        <span>{{item}}</span>
        <span class="img-down"></span>
        <!--<img class="img-down" style="width: .18rem" v-src="'/static/img/icon-sort-down.png'" alt="">-->
      </div>
    </div>
    <div v-transfer-dom>
      <popup v-model="showSelectContent" position="right">
        <div style="width: 200px" v-if="tabsIndex==0">
          <checklist title="区域筛选" :max="1" :label-position="labelPosition" required :options="areaList" v-model="checklistArea"
                     @on-change="areaChange"></checklist>
        </div>
        <div style="width: 200px" v-if="tabsIndex==1">
          <checklist title="价格筛选" :max="1" :label-position="labelPosition" required :options="priceList" v-model="checklistPrice"
                     @on-change="priceChange"></checklist>
        </div>
        <div style="width: 200px" v-if="tabsIndex==2">
          <checklist title="面积筛选" :max="1" :label-position="labelPosition" required :options="m_j_List" v-model="checklistMJ"
                     @on-change="mjChange"></checklist>
        </div>
        <div style="width: 200px" v-if="tabsIndex==3">
          <checklist title="户型筛选" :max="1" :label-position="labelPosition" required :options="h_x_List" v-model="checklistHx"
                     @on-change="hxChange"></checklist>
        </div>
      </popup>
    </div>
    <renting-house-list :item="item" :key="index" v-for="(item,index) in houseList"></renting-house-list>
  </div>
</template>

<script>
  var mo = function (e) {
    e.preventDefault();
  };
  import {URI_GETHOUSELIST} from 'src/const/shareUri'
  import rentingHouseList from 'src/components/RentingHouseList'
  import {TransferDom, Popup, Checklist} from 'vux'
  export default {
    name: "SecondHouse",
    directives: {TransferDom},
    components: {rentingHouseList, Popup, Checklist},
    data() {
      return {
        tabList: '',
        houseList: [],
        tabs: ['区域', '价格', '面积', '户型'],
        labelPosition: 'left',
        checklistArea: [],
        areaList: ['不限', '孝南'],
        checklistPrice: [],
        priceList: ['不限', '200以下', '200-400', '400-700', '700-1000', '1000-1500', '1500-2000', '2000-3000', '3000以上'],
        checklistMJ: [],
        m_j_List: ['不限', '50㎡以下', '50-70㎡', '70-90㎡', '90-110㎡', '110-130㎡', '130-150㎡', '150-200㎡', '200-300㎡', '300㎡以上'],
        checklistHx: [],
        h_x_List: ['不限', '一室', '两室', '三室', '四室', '五室', ' 五室以上'],
        tabsIndex: 0,
        showSelectContent: false,
        click: -1,
        show9: false
      }
    },
    watch: {
      'showSelectContent'(val) {
        if (val) {
          //document.body.style.overflow = 'hidden';
          this.stop();
        } else {
          //document.body.style.overflow = '';
          this.move();
        }
      }
    },
    created() {
      this.getHouseList();
    },
    mounted() {
      this.$nextTick(() => {
        this.tabList = document.getElementsByClassName('tab-list');
      })
    },
    methods: {
      selectListClick(index) {
        this.tabsIndex = index;
        this.showSelectContent = true;
        // if (this.click !== index) {
        //   this.showSelectContent = true;
        //   this.click = index;
        // } else {
        //   this.showSelectContent = false;
        //   this.click = -1;
        // }
      },
      hide() {
        this.showSelectContent = false;
      },
      areaChange() {
        if (this.checklistArea.length > 0 && this.checklistArea) {
          console.log(this.checklistArea);
          if (this.checklistArea[0] == '不限') {
            this.tabs[0] = '区域';
            this.tabList[0].classList.remove('red');
            this.showSelectContentfalse();
          } else {
            this.tabs[0] = this.checklistArea[0];
            this.tabList[0].classList.add('red');
            //this.tabList[0].className += ' ' + 'red';
            //console.log(list[0].firstChild.nodeName);
            // console.log(list[0].addClass('red'));
            this.showSelectContentfalse();
          }
        }
      },
      priceChange() {
        if (this.checklistPrice.length > 0 && this.checklistPrice) {
          if (this.checklistPrice[0] == '不限') {
            this.tabs[1] = '价格';
            this.tabList[1].classList.remove('red');
            this.showSelectContentfalse();
          } else {
            this.tabs[1] = this.checklistPrice[0];
            this.tabList[1].classList.add('red');
            this.showSelectContentfalse();
          }
        }
      },
      mjChange() {
        if (this.checklistMJ.length > 0 && this.checklistMJ) {
          if (this.checklistMJ[0] == '不限') {
            this.tabs[2] = '面积';
            this.tabList[2].classList.remove('red');
            this.showSelectContentfalse();
          } else {
            this.tabs[2] = this.checklistMJ[0];
            this.tabList[2].classList.add('red');
            this.showSelectContentfalse();
          }

        }
      },
      hxChange() {
        console.log(4);
        if (this.checklistHx.length > 0 && this.checklistHx) {
          if (this.checklistHx[0] == '不限') {
            this.tabs[3] = '户型';
            this.tabList[3].classList.remove('red');
            this.showSelectContentfalse();
          } else {
            this.tabs[3] = this.checklistHx[0];
            this.tabList[3].classList.add('red');
            this.showSelectContentfalse();
          }

        }
      },
      getHouseList() {
        this.$ajax.get(URI_GETHOUSELIST, {}, res => {
          this.houseList = res.data;
          console.log(this.houseList);
        });
      },
      /*common function*/
      showSelectContentfalse() {
        this.showSelectContent = false
      },
      /***禁止滑动***/
      stop() {
        document.body.style.overflow = 'hidden';
        document.addEventListener("touchmove", mo, false);//禁止页面滑动
      },

      /***取消滑动限制***/
      move() {
        document.body.style.overflow = '';//出现滚动条
        document.removeEventListener("touchmove", mo, false);
      },
    }
  }
</script>

<style lang="less" scoped>

  .select-nav {
    height: .84rem;
    position: relative;
    z-index: 200;
    .tab-list {
      font-size: 14px;
      &.red {
        color: @red;
        .img-down{
          background: url('../../../static/img/icon-sort-down-active.png') no-repeat center center;
          background-size: contain;
        }
      }
      .img-down {
        display: inline-block;
        width: .18rem;
        height: .09rem;
        margin-left: .14rem;
        background: url('../../../static/img/icon-sort-down.png') no-repeat center center;
        background-size: contain;
      }
    }
  }

  .select_container {
    position: fixed;
    top: 0.84rem;
    left: 0;
    height: 100%;
    background: rgba(0, 0, 0, .4);
    width: 100%;
    z-index: 1;
  }

  .select_content {
    height: 4rem;
    background: #fff;
    position: absolute;
    top: 0.84rem;
    left: 0;
    width: 100%;
    transform: translate3d(0, -100%, 0);
    /*opacity: 0;*/
    z-index: 2;
    text-align: center;
  }

  .fade-in {
    animation: fadeIn .3s forwards;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;

      transform: translate3d(0, -100%, 0);
    }

    to {
      opacity: 1;
      transform: none;
      //transform: translate3d(0, 0%, 0);
    }
  }

</style>